<template>
	<div>
		<van-search v-model="searchValue" placeholder="请输入搜索关键词" shape="round" />
		<div class="search_wrap" v-if="resultSearchList.length==0">
			<p class="hot_title">热门搜索</p>
			<!-- 热搜关键词容器 -->
			<div>
				<!-- 每个搜索关键词 -->
				<span v-for="(obj,index) in hotSearchList" :key="index" class="hot_item"
					@click="btn(obj.first)">{{obj.first}}</span>
			</div>
		</div>

		<div class="search_wrap" v-if="resultSearchList.length!=0">
			<!-- 标题 -->
			<p class="hot_title">最佳匹配</p>
			<SongItem v-for="obj in resultSearchList" :key="obj.id" :name="obj.name"
				:author="obj.artists[0].name+' '+obj.name" :id="obj.id"></SongItem>
			<!-- <van-cell center v-for="obj in resultSearchList"
				:key="obj.id"
				:title="obj.name"
				:label="obj.artists[0].name + ' - ' + obj.name">
				<template #right-icon>
					<van-icon name="play-circle-o" size="0.6rem" />
				</template>
			</van-cell> -->
		</div>
	</div>
</template>

<script>
	import {
		hotSearchAPI,
		resultSearchAPI
	} from "@/api"
	import SongItem from "@/components/SongItem"
	export default {
		name: "Search",
		data() {
			return {
				searchValue: "",
				hotSearchList: [],
				resultSearchList: [],
				timer: ""
			}
		},
		async mounted() {
			//热搜关键字
			const res1 = await hotSearchAPI()
			this.hotSearchList = res1.data.result.hots
		},
		watch: {
			searchValue(val) {
				clearTimeout(this.timer)
				this.timer = setTimeout(async () => {
					if (this.searchValue.length === 0) {
						// 搜索关键词如果没有, 就把搜索结果清空阻止网络请求发送(提前return)
						this.resultSearchList = [];
						return;
					}
					if(this.resultSearchList.length!=0){
						return
					}
					const res = await resultSearchAPI({
						keywords: this.searchValue,
						type: 1,
						limit: 20
					})
					if (res.data.result.songs === undefined) {
						this.resultList = [];
						return;
					}
					this.resultSearchList = res.data.result.songs
				}, 500)

			}

		},
		methods: {
			async btn(val) {
				this.searchValue = val
				const res=await resultSearchAPI({keywords:this.searchValue,type:1,limit:20})
				this.resultSearchList=res.data.result.songs
			}
		},
		components: {
			SongItem
		}
	}
</script>

<style scoped>
	/* 搜索容器的样式 */
	.search_wrap {
		padding: 0.266667rem;
	}

	/*热门搜索文字标题样式 */
	.hot_title {
		font-size: 0.32rem;
		color: #666;
	}


	/* 热搜词_样式 */
	.hot_item {
		display: inline-block;
		height: 0.853333rem;
		margin-right: 0.213333rem;
		margin-bottom: 0.213333rem;
		padding: 0 0.373333rem;
		font-size: 0.373333rem;
		line-height: 0.853333rem;
		color: #333;
		border-color: #d3d4da;
		border-radius: 0.853333rem;
		border: 1px solid #d3d4da;
	}

	.van-cell {
		border-bottom: 1px solid lightgray;
	}
</style>
